<template>
	<div class="attribute-container">
		<div class="head">
			<div>
				<svg aria-hidden="true" class="svg-icon arrow" @click="handleExpand">
					<use v-if="!isExpand" href="#icon-right_arrow_normal"></use>
					<use v-else href="#icon-below_arrow_normal"></use> 
				</svg>
				<span>样式</span>
			</div>
			
			<div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
				<el-tooltip
				        class="box-item"
				        effect="dark"
				        content="生成组件"
				      >
					<el-icon class="custom-icon" @click="generateAssembly"><Stamp /></el-icon>
				</el-tooltip>
				
				<el-tooltip
				        class="box-item"
				        effect="dark"
				        content="更新组件"
				      >
					<el-icon class="custom-icon" @click="updateAssembly"><RefreshLeft /></el-icon>
				</el-tooltip>
				
				<el-tooltip
				        class="box-item"
				        effect="dark"
				        content="更新关联对象"
				      >
					<el-icon class="custom-icon" @click="updateActorByAssembly"><Refresh /></el-icon>
				</el-tooltip>
				
<!-- 				<div>
					<el-tooltip
					        class="box-item"
					        effect="dark"
					        content="组件库"
					      >
					       <svg aria-hidden="true" class="svg-icon" @click="handleOpenStyleLibrary">
								<use href="#icon-book"></use>
					       </svg>
					</el-tooltip>
				</div> -->
			</div>
		</div>
 		<div class="body" v-if="isExpand">
			<ul class="style-list">
				<li v-for=" style in tableData" >
					<div class="info">
						<div class="image-img">
							<img class="ant-image-img imgS" :src="style.url" />
						</div>
						
						<div class="code">
							<span>{{style.name}}</span>
						</div>
						
						<div class="default">
							<el-tooltip
							        class="box-item"
							        effect="dark"
							        content="设置默认"
							      >
								<el-switch v-model="style.state" 
									size="small" 
									active-value="true"
									inactive-value="false"
									@change="handleChange(style)" />
							</el-tooltip>
						</div>
					</div>
					<div class="operate">
						
						<div class="btn">
							<el-tooltip
							        class="box-item"
							        effect="dark"
							        content="编辑"
							      >
							        <el-button
							          type="primary"
							          size="small"
									  color="#626aef"
							          link
							           @click="handleOpen(style)"
							        >
							        	<i-ep-edit />
							        </el-button>
							</el-tooltip>
						</div>
						
						<div class="btn">
							<el-tooltip
							        class="box-item"
							        effect="dark"
							        content="复制"
							      >
							        <el-button
							          type="primary"
							          size="small"
									  color="#626aef"
							          link
							           @click="handleCopy(style)"
							        >
							        	<i-ep-CopyDocument />
							        </el-button>
							</el-tooltip>
						</div>
						
						<div class="btn">
							<el-tooltip
							        class="box-item"
							        effect="dark"
							        content="删除"
							      >
							        <el-button
							          type="primary"
							          size="small"
									  color="#626aef"
							          link
							          @click="handleDelete(style)"
							        >
							        	<i-ep-delete />
							        </el-button>
							</el-tooltip>	
						</div>
						
					</div>
				</li>
			</ul>
		</div>	 
		<ActorStylePane v-if="isClose" :baseUrl="baseUrl" :actorId="props.actorId" :style="style" @close="handleClose" @onchange="onchange" @refresh="refresh"></ActorStylePane>
		<ActorStyleLibrary v-if="isOpenStyleLibrary" :baseUrl="baseUrl" :actorId="props.actorId" :product="props.product" @close="handleClosStyleLibrary"></ActorStyleLibrary>
	</div>
</template>

<script lang="ts" setup>
	
	import { Stamp,RefreshLeft,Refresh } from '@element-plus/icons-vue'
	
	import {
		getActorStylePage,deleteActorStyle,saveActorStyle,copyActorStyle,updateAllActorStyleByActor
	} from "@/api/wdp/actor";
	
	import {
		generateAssemblyByActor,updateAssemblyStyleByActor
	} from "@/api/wdp/assembly";
	
	import ActorStylePane from "@/components/Actor/ActorStylePane.vue";
	import ActorStyleLibrary from "@/components/Actor/ActorStyleLibrary.vue";
	const isExpand=ref(false);
	const props = defineProps({
		baseUrl: {
			type: String,
			default: () => ''
		},
		actorId: {
			type: String,
			default: () => ''
		},
		state: {
			type: String,
			default: () => ''
		},
		product: {
			type: String,
			default: () => ''
		}
	})
	
	const isClose=ref(false);
	const isOpenStyleLibrary=ref(false);
	const loading=ref<boolean>(false);
	let tableData=ref<any[]>([])
	const baseUrl = ref<string>('');
	const actorId = ref<string>('');
	const style = ref();
	
	const handleExpand=()=>{
		isExpand.value=!isExpand.value
		if(isExpand.value==true){
			load();
		}
	}
	
	const load=()=>{
		if(isExpand.value==false){
			return;
		}
		loading.value=true;
		getActorStylePage({
			actorId:actorId.value,
		})
		.then((res:any) => {
			const _data=res?.data
			_data.forEach((item:any) => {
				if(item?.thumbnail){
					if(item?.thumbnail.indexOf("http") == -1 && item?.thumbnail.indexOf("https") == -1 && item?.thumbnail.indexOf("HTTP") == -1 && item?.thumbnail.indexOf("HTTPS") == -1){
						item['url']=baseUrl.value+'/file/thumbnail/'+item?.thumbnail+"?"+ new Date().getTime();
					}
					else{
						item['url']=item?.thumbnail
					}
				}else{
					item['url']=ref(new URL(`../../assets/images/icon-img.png`, import.meta.url).href).value
				}
				if(isClose.value==true && style.value?.id==item.id){
					style.value=item;
				}
			});
			
			tableData.value= _data;
			if(tableData.value.length>0){
				isExpand.value=true;
			}else{
				isExpand.value=false;
			}
		})
		.catch((e:any) => {
			console.error(e)
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleDelete=(data:any)=>{
		ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			isClose.value=false;
			loading.value=true;
			deleteActorStyle({
				id:data.id,
			})
			.then(() => {
				ElMessage.success("成功");
				load();
				update();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消删除"));
	}
	
	const handleCopy=(data:any)=>{
		ElMessageBox.confirm("确认复制已选中的数据项?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			isClose.value=false;
			loading.value=true;
			copyActorStyle(data.id)
			.then(() => {
				ElMessage.success("成功");
				load();
				update();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消复制"));
	}
	
	const generateAssembly=()=>{
		ElMessageBox.confirm("确认使用当前对象样式信息生成组件吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			generateAssemblyByActor({
				id:actorId.value
			})
			.then((res:any) => {
				ElMessage.success("成功");
				load();
				emits('onchange',{
					type:'product',
					data:{
						product:res.data.product
					}
				})
				update();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	
	const updateAssembly=()=>{
		ElMessageBox.confirm("确认使用当前对象样式信息更新组件吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			updateAssemblyStyleByActor({
				id:actorId.value
			})
			.then(() => {
				ElMessage.success("成功");
				load();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	
	const updateActorByAssembly=()=>{
		ElMessageBox.confirm("确认使用当前对象样式信息更新使用同一组件的对象样式吗（不可逆）?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			updateAllActorStyleByActor({
				id:actorId.value
			})
			.then(() => {
				ElMessage.success("成功");
				load();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	
	const emits = defineEmits(['onchange'])
	const onchange=(e:any)=>{
		update()
	}
	
	const refresh=(e:any)=>{
		load()
		if(e?.field=='code'){
			update();
		}
	}
	
	const update=()=>{
		loading.value=true;
		getActorStylePage({
			actorId:actorId.value,
		})
		.then((res:any) => {
			const _data=res?.data
			const _style=ref<any>({
				style:{}
			})
			_data.forEach((item:any) => {
				if(item.state=='true'){
					_style.value['state']=item.code
				}
				_style.value['style'][item.code]=JSON.parse(item.jsonData)
			});
			emits('onchange',{
				type:'style',
				data:{
					state:_style.value.state,
					style:_style.value.style
				}
			})
		})
		.catch((e:any) => {
			console.error(e)
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleOpenStyleLibrary=()=>{
		if(isClose.value==true){
			isClose.value=false;
		}
		isOpenStyleLibrary.value=!isOpenStyleLibrary.value;
	}
	
	const handleClosStyleLibrary=()=>{
		isOpenStyleLibrary.value=!isOpenStyleLibrary.value;
		load();
	}
	
	const handleOpen=(data:any)=>{
		if(isOpenStyleLibrary.value==true){
			isOpenStyleLibrary.value=false;
		}
		style.value=data;
		isClose.value=!isClose.value;
	}
	
	const handleClose=()=>{
		isClose.value=!isClose.value;
	}
	
	const handleChange=(style:any)=>{
		saveActorStyle({
			id:style?.id,
			actorId:style?.actorId,
			thingmodelId:style?.thingmodelId,
			thingmodelFunId:style?.thingmodelFunId,
			name:style?.name,
			code:style?.code,
			state:style?.state,
		}).then(() => {
			load();
			update();
		});
	}
	
	defineExpose({
	});
	
	onMounted(() => {
	});
	
	watch(props,() => {
			baseUrl.value=props.baseUrl;
			actorId.value=props.actorId;
			load();
		},
	    { immediate: true, deep: true },
	)
	
</script>

<style scoped>
	.style-popper{
	}
</style>